<template>
    <div>
    <h3 align="center">管理员登录</h3>
    <table>
        <tbody>
            <tr>
                <td align="right">账号</td>
                <td><input type="text" v-model="queryInfo.userName"></td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td><input type="password" v-model="queryInfo.userPwd"></td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="button" value="登录" class="btn btn-success" @click="login()"></td>
            </tr>
        </tbody>
    </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
//1.安装，2.导入 作用：专门用来发送网络请求的 相当于$.ajax
import axios from 'axios';
//vue-router实现页面跳转
import {useRouter} from 'vue-router';
//router 作用：可以实现页面跳转,并且传递参数
const router = useRouter();

//数据
let queryInfo = reactive({
    userName:'',
    userPwd:''
})



//登录
const login = () => {
    //1.非空验证+有效性验证
    if(queryInfo.userName == '')
    {
        alert('账号不能为空');
        return;
    }
    if(queryInfo.userPwd == '')
    {
        alert('密码不能为空');
        return;
    }
    //2.发送网络请求
    axios({
        url:'/api/Admin/Login',
        method:'get',
        params:{
            userName:queryInfo.userName,
            userPwd:queryInfo.userPwd
        }
    })
    .then(res=>{
        //请求的结果
        console.log(res);
        if(res.data==-1){
            alert('账号不存在或者错误');
            return;
        }
        if(res.data==-2){
            alert('密码错误');
            return;
        }
        //登陆成功 1.存储用户信息 2.跳转到会员添加页面
        router.push('/memberlist');
    })
    .catch((err)=>{
        //2.请求登录失败的处理
        console.log(err);
    })
}
</script>

<style scoped>

</style>